<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>老虎机</title>
    <link rel="stylesheet" href="./laohu.css"/>
    <style>
        * { margin: 0; padding: 0;}
        body { background-color: #d1e97a;}
        .line { padding: 100px 0px;}
        .slotMachineButton { width: 200px; height: 200px; overflow: hidden; display: inline-block; text-align: center; }
        .slotMachineButton { -moz-box-shadow: inset 0px 1px 0px 0px #fce2c1; -webkit-box-shadow: inset 0px 1px 0px 0px #fce2c1; box-shadow: inset 0px 1px 0px 0px #fce2c1; background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) ); background: -moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% );  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');
            background-color: #ffc477; border-radius: 75px; border: 6px solid #eeb44f; display: inline-block; color: #ffffff; font: 700 70px/140px "Microsoft Yahei"; height: 150px; width: 150px; text-decoration: none; text-align: center; text-shadow: 1px 1px 0px #cc9f52; margin-left: 50px; cursor: pointer; }
        .slotMachineButton:hover { background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) ); background: -moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% );  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');
            background-color: #fb9e25; }
        .slotMachineButton:active { position: relative; top: 1px; }
        .slotMachine { border-radius: 20px;width: 200px; height: 200px; overflow: hidden; display: inline-block; text-align: center; border: 3px solid #000; background-color: #ffffff; }
        .noBorder { border: none !important; background: transparent !important; font: 20px arial;}
        .slotMachine .slot { width: 200px; height: 200px;}
        .slot1 { background-image: url("./img/1.jpg"); }
        .slot2 { background-image: url("./img/2.jpg"); }
        .slot3 { background-image: url("./img/3.jpg"); }
        .slot4 { background-image: url("./img/4.jpg"); }
        .slot5 { background-image: url("./img/5.jpg"); }
        .slot6 { background-image: url("./img/6.jpg"); }
        .slot7 { background-image: url("./img/7.jpg"); }
        .slot8 { background-image: url("./img/8.jpg"); }
        .slot9 { background-image: url("./img/9.jpg"); }
        .slot10 { background-image: url("./img/10.jpg"); }
    </style>
    <script src="./jquery-1.8.3.min.js"></script>
    <script src="./jquery.slotmachine.js"></script>
    <script src="./local.js"></script>
</head>

<body>
<div style="float:left; margin-top:-25px;">
    <img src="./img/01.png" alt=""/>
</div>
<div style="float:right; margin-top:-25px;">
    <img src="./img/02.png" alt=""/>
</div>

<h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">老虎机</h1>


<div class="line">
    <div class="content" style="text-align: center">
        <div class="clear">
            <div id="one" class="slotMachine item">
                <div class="slot slot1"></div>
                <div class="slot slot2"></div>
                <div class="slot slot3"></div>
                <div class="slot slot4"></div>
                <div class="slot slot5"></div>
                <div class="slot slot6"></div>
                <div class="slot slot7"></div>
                <div class="slot slot8"></div>
                <div class="slot slot9"></div>
                <div class="slot slot10"></div>
            </div>
            <div id="two" class="slotMachine item">
                <div class="slot slot1"></div>
                <div class="slot slot2"></div>
                <div class="slot slot3"></div>
                <div class="slot slot4"></div>
                <div class="slot slot5"></div>
                <div class="slot slot6"></div>
                <div class="slot slot7"></div>
                <div class="slot slot8"></div>
                <div class="slot slot9"></div>
                <div class="slot slot10"></div>
            </div>
            <div id="thr" class="slotMachine item">
                <div class="slot slot1"></div>
                <div class="slot slot2"></div>
                <div class="slot slot3"></div>
                <div class="slot slot4"></div>
                <div class="slot slot5"></div>
                <div class="slot slot6"></div>
                <div class="slot slot7"></div>
                <div class="slot slot8"></div>
                <div class="slot slot9"></div>
                <div class="slot slot10"></div>
            </div>
            <div id="slotMachineButton1" class="slotMachineButton" onclick="tiger.go()">GO!</div>
        </div>
        <div class="clear">
            <div id="machine1Result" class="slotMachine noBorder" style="margin-left:1px;">Slot: 0</div>
            <div id="machine2Result" class="slotMachine noBorder" style="margin-left:1px;">Slot: 1</div>
            <div id="machine3Result" class="slotMachine noBorder" style="margin-left:1px;">Slot: 2</div>
            <div class="slotMachine noBorder"></div>
        </div>
        <div style="margin-left:-10px; margin-top:-100px;">
    <span style="margin-right: 20px">
        总分：
        <b id="totle">0</b>
        <b id="change" style="color: aquamarine"></b>
    </span>
    <span>
        花费：
        <b id="cost">0</b>
    </span>
    </div>
    <div>
        <button class="btn btn-in" onclick="tiger.pushIn()">投币</button>
    </div>
</div>

<script>
    $(document).ready(function(){
        var machine1 = $("#machine1").slotMachine({
            active	: 0,
            delay	: 500
        });

        var machine2 = $("#machine2").slotMachine({
            active	: 1,
            delay	: 500
        });

        var machine3 = $("#machine3").slotMachine({
            active	: 2,
            delay	: 500
        });

        function onComplete($el, active){
            switch($el[0].id){
                case 'machine1':
                    $("#machine1Result").text("Index: " + active.index);
                    break;
                case 'machine2':
                    $("#machine2Result").text("Index: " + active.index);
                    break;
                case 'machine3':
                    $("#machine3Result").text("Index: " + active.index);
                    break;
            }
        }

        $("#slotMachineButton1").click(function(){
            machine1.shuffle(3, onComplete);
            setTimeout(function(){
                machine2.shuffle(3, onComplete);
            }, 500);
            setTimeout(function(){
                machine3.shuffle(3, onComplete);
            }, 1000);
        })
    });
</script>

</body>
</html>